import { useState, useEffect } from 'react'
import HotKeywords from '../SearchView/HotKeywords';
import QuickSearchPanel from '../SmallPanelView/QuickSearchPanel';
import SmallPanelAdvancedSearch from '../SmallPanelView/SmallPanelAdvancedSearch'
import HistoryList from './HistoryList'
import SearchResultList from './SearchResultList'
import { useHotKeywordsPosition } from '../../../../store/hooks/useHotKeywordsPosition';
import { useSearchUIState } from '../../../../store/hooks/useSearchUIState';
import { useSearchPropsState } from '../../../../store/hooks/useSearchPropsState';
import { useViewType } from '../../../../store/hooks/useViewType';
import type { Dispatch, SetStateAction } from 'react'
export function SearchResultPanel(props: {controlId: string, hoverIndex?: number, smallPanelViewInputClassName?: string, $fullScreen: Dispatch<SetStateAction<boolean>> }) {
  const hotKeywordsPosition = useHotKeywordsPosition();
  const { hotKeywordsSwitch, pullWidth, indexRange, quikSearch, historySearch, quikSearchPanelHeight } = useSearchPropsState();
  const { searchBtnWidth, panelId, selectShowTab } = useSearchUIState();
  const viewType = useViewType();
  const [panelWidth, $panelWidth] = useState()
  const { smallPanelViewInputClassName, controlId } = props
  useEffect(() => {
    const btn: any = document.querySelector(`#${controlId}_searchBtn`);
    const searchInput: any = document.querySelector(`#${controlId}_searchInput`);
    if (!searchInput) {
      return
    }
    if (indexRange) {
      $panelWidth(searchInput.clientWidth - btn.clientWidth - pullWidth - 2)
    } else {
      $panelWidth(searchInput.clientWidth - btn.clientWidth - 2)
    }
  })
  const style = smallPanelViewInputClassName ? {
    maxHeight: 500,
    paddingBottom: 32
  } : { left: indexRange ? pullWidth + 1 : 0, right: searchBtnWidth + 2 }

  return (
    <div
      className={'search-result-panel'}
      style={{ ...style, width: panelWidth }}
    >
      {panelId == 'historySearch' && <>
        {historySearch && <HistoryList indexRange={indexRange}  hoverIndex={props.hoverIndex} smallPanelViewInputClassName={smallPanelViewInputClassName} />}
        <SearchResultList hoverIndex={props.hoverIndex} />
        {hotKeywordsSwitch && (hotKeywordsPosition === 'inside' || viewType == 'smallPanelView') && <HotKeywords />}
      </>
      }
      {panelId == 'quickSearch' && quikSearch && <QuickSearchPanel hoverIndex={props.hoverIndex} $loading={props.$loading} quikSearchPanelHeight={quikSearchPanelHeight}/>}
      {panelId == 'advancedSearch' && selectShowTab?.advancedSearch && <SmallPanelAdvancedSearch />}
    </div>
  );
}